<template>
	<view class="post_item" @click="goDeatil">
		<view class="text_info">
			<view class="main">
				<view class="title">{{ event.title }}</view>
				<view class="brief" v-html="event.description"> </view>
			</view>
			<view class="item_footer">
				<view class="author_name">
					<text>{{ event.club_name }}</text>
				</view>
				<view class="like_count">
					<van-icon name="records-o" />
					<text
						>{{ event.registered_count }}/{{ event.registration_limit }}</text
					>
				</view>
				<view class="view_count">
					<van-icon name="underway-o" />
					<text>{{ statusText }}</text>
				</view>
			</view>
		</view>
		<view class="preview_img">
			<van-image
				:src="event.background_image_url"
				width="200rpx"
				height="200rpx"
				radius="10rpx"
				fit="cover"
				lazy-load
				use-loading-slot
			>
				<van-loading slot="loading" type="spinner" size="20" vertical />
			</van-image>
		</view>
	</view>
</template>

<script setup>
import { computed, nextTick, onMounted, watch } from 'vue'
import { storeToRefs } from 'pinia'

import useEventStore from '@/store/event.js'
import { formatUTC } from '@/utils/format.js'
const { event } = defineProps({
	event: {
		type: Object,
		required: true
	}
})
onMounted(() => {
	fetchData()
})
const eventStore = useEventStore()
function fetchData() {}

// 去详情页面
function goDeatil() {
	uni.navigateTo({
		url: `/pages/event-detail/event-detail?event_id=${event.id}`
	})
}

// 渲染状态
const statusText = computed(() => {
	if(event.status === 'approved') {
		return '未开始'
	}else if(event.status === 'ongoing') {
		return '进行中'
	}else if(event.status === 'finished') {
		return '已结束'
	}else if(event.status === 'pending'){
		return '审核中'
	}else {
		return '已拒绝'
	}
})
</script>

<style lang="less" scoped>
.post_item {
	margin: 15rpx 0;
	height: 220rpx;
	background-color: #fff;
	display: flex;
	padding: 20rpx;
	width: 90%;
	border-radius: 20rpx;
	overflow: hidden;
	position: relative;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	// box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
	.text_info {
		flex: 1;
		display: flex;
		flex-direction: column;
		.main {
			flex: 1;
			.title {
				padding-bottom: 15rpx;
				color: #000;
				font-weight: 700;
				font-size: 33rpx;
			}

			.brief {
				font-size: 28rpx;
				color: #444;
			}
		}

		.item_footer {
			display: flex;
			justify-content: left;
			color: var(--lightTextColor);
			font-size: 27rpx;
			.author_name,
			.like_count,
			.view_count {
				margin-right: 15rpx;
				display: flex;
				align-items: center;
				.footer_text {
					margin-left: 5rpx;
				}
			}
		}
	}

	.preview_img {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 15rpx;
	}
}
</style>
